<template>
	<div>
		<div>
			<table style="text-align: center;">
				<tr>
					<td>项目名称:</td>
					<td>
						<select v-model="projectId">
							<option value="">请选择</option>
							<option v-for="(row,index) in projectList" v-bind:value="row.id">{{row.projectName}}</option>
						</select>
					</td>
				</tr>
			</table>

		</div>

		<!--销售计划-->
		<div id="salesDataHighcharts" style="width: 50%;float: left;"></div>
		<div id="returnDataHighcharts" style="width: 50%;float: left; "></div>
		<!-- 项目动态货值 -->
		<div id="dynamiSalesDataHighcharts"></div>
		<!-- 业态分布 -->
		<div id="industDataHighcharts" style="width: 50%;float: left; "></div>
		<div id="industSalesDataHighcharts" style="width: 50%;float: left; "></div>

		<!-- 业态每月的动态货值 -->
		<div id="industdynamiSalesDataHighcharts"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dynamiSalesDataList: [],
				salesDataList: [],
				returnDataList: [],
				projectList: [],
				projectId: "",
				industDataList: [],
				industSalesDataList: []
			}
		},
		watch: {
			'projectId': function(newValue, oldValue) {
				var _self = this;
				if(newValue != null && newValue != "") {
					//动态货值
					this.dynamiSalesDataHighcharts();
					//销售计划
					this.saleDataHighcharts();
					//回款计划
					this.returnDataHighcharts();
					//业态占比
					this.industDataHighcharts();
					//业态每个月份的销售，回款
					this.industSalesDataHighcharts();
					//业态每月的动态货值
					//this.industdynamiSalesDataHighcharts();

				} else {
					layer.alert("请选择项目");
				}
			}
		},
		mounted: function() {
			//项目列表
			this.findProjectList();

		},
		methods: {
			findProjectList: function() {
				var _self = this;
				var params = {
					resourcesCode:'menu_0003_0001',
					resourcesName:'resName_pro_list',
					permissionUserId:_self.$route.params.userid
				};
				var url = _self.utilHelper.apiUrl + "/wordFlowData/findProjectList";
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					_self.projectList = body;
				});
			},
			dynamiSalesDataHighcharts: function() {
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/wordFlowData/findPmoInfo";
				var params = {
					projectId: _self.projectId,
					year: '2017'
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					_self.dynamiSalesDataList = body.dynamiValueList;
					this.createBrokenLine('dynamiSalesDataHighcharts', '动态货值', _self.dynamiSalesDataList);
				});

			},
			returnDataHighcharts: function() {
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/wordFlowData/findProjectPlan";
				var params = {
					projectId: _self.projectId,
					saleReturnFlag: 3
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					_self.returnDataList = body;
					this.createBrokenLine('returnDataHighcharts', '回款计划', _self.returnDataList);
				});
			},
			saleDataHighcharts: function() {
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/wordFlowData/findProjectPlan";
				var params = {
					projectId: _self.projectId,
					saleReturnFlag: 1
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					_self.salesDataList = body;
					this.createBrokenLine('salesDataHighcharts', '销售计划', _self.salesDataList);
				});
			},
			createBrokenLine: function(divId, title, data) {
				var _self = this;
				_self.$highcharts.chart({
					chart: {
						type: 'line',
						renderTo: divId,
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false

					},
					title: {
						text: title
					},
					subtitle: {
						text: '数据来源: M2绿城管理系统'
					},
					xAxis: {
						categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
					},
					yAxis: {
						title: {
							text: '单位:万元'
						}
					},
					plotOptions: {
						line: {
							dataLabels: {
								enabled: true // 开启数据标签
							},
							enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
						}
					},
					series: data
				});
			},
			industDataHighcharts: function() {
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/wordFlowData/findIndustData";
				var params = {
					projectId: _self.projectId
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					_self.industDataList = body;
					_self.$highcharts.chart({
						chart: {
							type: 'pie',
							renderTo: 'industDataHighcharts',
							options3d: {
								enabled: true,
								alpha: 45,
								beta: 0
							}
						},
						title: {
							text: '房产业态'
						},
						subtitle: {
							text: '数据来源: M2绿城管理系统'
						},
						tooltip: {
							headerFormat: '{series.name}<br>',
							pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b><br/>数量:<b>{point.y}</b>'

						},
						plotOptions: {
							pie: {
								allowPointSelect: true,
								cursor: 'pointer',
								dataLabels: {
									enabled: false
								},
								showInLegend: true
							}
						},
						series: [_self.industDataList]
					});
				});
			},
			industSalesDataHighcharts: function() {
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/wordFlowData/findIndustSalasData";
				var params = {
					projectId: _self.projectId,
					year: '2017'
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					_self.industSalesDataList = body.salesList;
					this.industdynamiSalesDataHighcharts(body.industSalesList);
					_self.$highcharts.chart({

						chart: {
							type: 'column',
							renderTo: 'industSalesDataHighcharts'
						},
						title: {
							text: '房产业态销售额'
						},
						subtitle: {
							text: '数据来源: M2绿城管理系统'
						},
						xAxis: {
							categories: [
								'一月',
								'二月',
								'三月',
								'四月',
								'五月',
								'六月',
								'七月',
								'八月',
								'九月',
								'十月',
								'十一月',
								'十二月'
							],
							crosshair: true
						},
						yAxis: {
							min: 0,
							title: {
								text: '单位：(万元)'
							}
						},
						tooltip: {
							headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
							pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
								'<td style="padding:0"><b>{point.y:.1f} 万元</b></td></tr>',
							footerFormat: '</table>',
							shared: true,
							useHTML: true
						},
						plotOptions: {
							column: {
								pointPadding: 0.2,
								borderWidth: 0
							}
						},
						series: _self.industSalesDataList
					});
				});

			},
			industdynamiSalesDataHighcharts: function(industData) {
				var _self = this;
				_self.$highcharts.chart({

					chart: {
						renderTo: 'industdynamiSalesDataHighcharts',
						type: 'column',
						margin: 75,
						options3d: {
							enabled: true,
							alpha: 10,
							beta: 25,
							depth: 70,
							viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
							frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
								// 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
								// side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
								bottom: {
									size: 10,
									color: 'red'
								},
								side: {
									size: 1,
									color: 'transparent'
								},
								back: {
									size: 1,
									color: 'transparent'
								}
							}
						},
					},
					title: {
						text: '业态动态货值'
					},
					subtitle: {
						text: '数据来源: M2绿城管理系统'
					},
					plotOptions: {
						column: {
							depth: 25
						}
					},
					xAxis: {
						categories: [

							'一月',
							'二月',
							'三月',
							'四月',
							'五月',
							'六月',
							'七月',
							'八月',
							'九月',
							'十月',
							'十一月',
							'十二月'
						]
					},
					yAxis: {
						title: {
							text: '单位:(万元)'
						}
					},
					series: industData
				});

			}
		}
	}
</script>